"use client";
import Image from "next/image";
import { useState } from "react";
import MyModal from "@/app/myComponents/common/Model";
import { Button } from "@/components/ui/button";
import FitImage from "../common/fitImage";
import { ChevronLeft } from "lucide-react";
import { ChevronRight } from "lucide-react";
import { AlbumDetailType } from "@/types/album";

export default function AlbumList({ albumList }: { albumList: AlbumDetailType[] }) {
  const [open, setOpen] = useState(false);
  const [selectedImg, setSelectedImg] = useState<{
    src: string;
    alt: string;
    id: string;
  } | null>(null);

  const updateSelectedImg = (direction: "prev" | "next") => {
    if (!selectedImg) return;
    const currentIdx = albumList.findIndex((img: { id: string }) => img.id === selectedImg.id);
    if (currentIdx === -1) return;
    const delta = direction === "prev" ? -1 : 1;
    const newIdx = (currentIdx + delta + albumList.length) % albumList.length;
    const newImg = albumList[newIdx];
    setSelectedImg(newImg);
    setImageUrl(newImg.id);
  };

  const setImageUrl = (id: string) => {
    const url = new URL(window.location.href);
    url.pathname = `/album/${id}`;
    window.history.replaceState({}, "", url.toString());
  };
  const handlePrevImage = () => updateSelectedImg("prev");
  const handleNextImage = () => updateSelectedImg("next");
  
  return (
    <>
      <div className="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4 space-y-4">
        {albumList.map((img: AlbumDetailType, idx: number) => (
          <div key={idx} className="mb-4 break-inside-avoid">
            <div className="max-w-md mx-auto p-2 rounded-lg border shadow-sm bg-white space-y-2 cursor-pointer hover:shadow-md transition"
              onClick={() => {
                setOpen(true);
                setSelectedImg(img);
                setImageUrl(img.id);
              }}
            >
              <div className="w-full flex justify-center">
                <FitImage
                  src={img.src}
                  alt={img.alt}
                  onClick={() => {
                    setOpen(true);
                    setSelectedImg(img);
                    setImageUrl(img.id);
                  }}
                />
              </div>
              <div className="space-y-1 px-2 pb-2">
                <h2 className="text-lg font-bold truncate">{img.title}</h2>
                <p className="text-gray-500 text-xs">{img.date}</p>
                <p className="text-gray-700 text-sm truncate">{img.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
      <MyModal
        trigger={undefined}
        open={open}
        onOpenChange={(v) => {
          setOpen(v);
          if (!v) {
            // 关闭弹窗时清空url的id参数
            const url = new URL(window.location.href);
            url.searchParams.delete("id");
            window.history.pushState({}, "", url.toString());
          }
        }}
        title="图片详情"
        description="图片详情"
      >
        <div className="flex flex-row items-center justify-center space-x-4">
          <Button
            variant="ghost"
            className="rounded-full bg-transparent border border-gray-300 hover:bg-gray-100 shadow-none w-10 h-10 p-0 flex items-center justify-center"
            onClick={() => {
              handlePrevImage();
            }}
          >
            <ChevronLeft className="w-5 h-5" />
          </Button>
          <Image
            src={selectedImg?.src || ""}
            alt={selectedImg?.alt || ""}
            onClick={() => {}}
            width={400}
            height={400}
          />
          <Button
            variant="ghost"
            className="rounded-full bg-transparent border border-gray-300 hover:bg-gray-100 shadow-none w-10 h-10 p-0 flex items-center justify-center"
            onClick={() => {
              handleNextImage();
            }}
          >
            <ChevronRight className="w-5 h-5" />
          </Button>
        </div>
      </MyModal>
    </>
  );
}
